<template>
  <div id="app">
    <!-- <img alt="Vue logo" :src="userInfo.avatar">
    <h2>{{ userInfo.name | fun }}</h2> -->
    <!-- <ul>
      <li  @click="fun('one')">推荐</li>
      <li @click="fun('two')">视频</li>
      <li @click="fun('three')">娱乐</li>
      <li @click="fun('four')">游戏</li>
    </ul> -->
    <ul>
      <li  v-for="(item ,index) in list" :key="index" @click="fun(item.activeCom)">{{item.title}}</li>
    </ul>
    <keep-alive>
        <transition name="fade">
            <!-- 动画过渡效果  -->
            <component :is="index"></component>
        </transition>
    </keep-alive>
    <button @click="show=!show">qqw</button>
     <transition name="fade">
         <p v-if="show">111111</p>
     </transition>
         <transition
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:after-enter="afterEnter"
            v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
            v-on:leave="leave"
            v-on:after-leave="afterLeave">
         <p >111111</p>
     </transition>
  </div>
</template>
<script>
import login from './mixin/login.js'//mixin 引入
import one from './components/one.vue'
import two from './components/two.vue'
import three from './components/three.vue'
import four from './components/four.vue'
export default {
  name: 'App2',
  data(){
    return{
        show:false,
        list:[
            {title:'推荐',activeCom:'one'},
            {title:'视频',activeCom:'two'},
            {title:'娱乐',activeCom:'three'},
            {title:'游戏',activeCom:'four'}],
        index:'one',
        userInfo:{
        name:'里斯',
        
        },
      
    }
  },
  components: { one,two,three,four },
  mixins:[ login ],//mixin混入 以mixins声明  固定的声明方式
  methods:{
    fun(index){
      this.index = index
    },
  // --------
  // 进入中
  // --------

  beforeEnter (el) {
      console.log('1',el)
        el.style.color = 'red'
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter (el, done) {
    // ...
    console.log('2',el)
    el.style.transition = 'all 3s'
    done()
  },
  afterEnter (el) {
      console.log('3',el)
    // ...
  },
  enterCancelled (el) {
      console.log('4',el)
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave (el) {
      console.log('5',el)
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave (el, done) {
      console.log('6',el)
    // ...
    done()
  },
  afterLeave (el) {
      console.log('7',el)
    // ...
  },
//   // leaveCancelled 只用于 v-show 中
//   leaveCancelled: function (el) {
//     // ...
//   }
  }
}
</script>

<style>
*{
  line-height: 60px;
  text-align: center;
}
ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
ul > li{
  text-align: center;
  list-style: none;
  display: inline-block;
}
.fade-enter{ /* 进来之前的透明度 */
    opacity: 1;
}
.fade-enter-active{ /* 过度状态 */
    transition: 1s all;
}
.fade-enter-to{ /* 进来之后的透明度 */
    opacity: 0;
    
}
.fade-enter{ /* 进来之前的透明度 */
    opacity: 0;
    color: red;
}
.fade-enter-active{ /* 过度状态 */
    transition: 3s all;
}
.fade-enter-to{ /* 进来之后的透明度 */
    opacity: 1;
    color: blue;
}
li:hover{
  color: red;
}
</style>
